<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="会员升级" :border-bottom="false"></u-navbar>
		<view class="m-div flex flex_sb">
			<view class="m-item " :class="cIndex==index?'m-item-sel':''" @click="selc(item,index)"
				v-for="(item,index) in datalist" :key="index">
				<view class="m-title">
					{{item.name}}
				</view>
				<view class="u-m-t-20">
					<span class="m-fh">¥</span>
					<span class="m-num">{{item.price}}</span>
				</view>
				<view class="m-hx u-m-t-12">
					原价 ¥{{item.org_price}}
				</view>
				<view class="gouxuan" v-if="cIndex==index">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</view>
			</view>
			
		</view>
		
		<view class="zhanwei"></view>
		<view class="hy-btn-div">
			<view class="hy-btn flex flex_cen" @click="$u.throttle(submit, 1000)">
				<span class="num" v-if="price">￥{{price}} </span>
				立即升级
			</view>
			<view class="u-m-t-24 flex flex_cen">
				<view class="chbox  flex_cen flex" v-if="chboxSel" @click="chboxSel=false">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</view>
				<view class="chbox-no" v-if="!chboxSel" @click="chboxSel=true"></view>
				<view class="u-m-l-10 font_14_999">
					开通前请确认
					<span class="yhxy" @click="tode">《会员服务协议》</span>
				</view>
			</view>
		</view>
		<couponList :couponShow="couponShow" @shiyong="shiyong" type="1"></couponList>
	</view>
</template>

<script>
	import couponList from '../../components/couponList/couponList.vue';
	export default {
		components: {
			couponList
		},
		data() {
			return {
				couponShow:false,
				chboxSel:false,
				cIndex:-1,
				datalist:[],
				price:'',
				id:'',
				yhq_id:''
			}
		},
		onLoad() {
			this.couponShow = true
			this.getList()
		},
		methods: {
			selc(e,i){
				
				this.$api({
					url: '/user/set_price',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						level_id:e.id,
						yhq_id:this.yhq_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.price = (res.data.price*1).toFixed(2)
						this.cIndex=i
						this.id = e.id
					}
				})
				
			},
			tode(){
				uni.navigateTo({
					url:"/pages/index/privacyAgreement/privacyAgreement?title=会员服务协议&id=39"
				})
			},
			
			shiyong(e){
				if(e){
					this.yhq_id = e.id
				}else{
					this.yhq_id = ''
				}
				// this.yhq_id = e
				this.couponShow = false
				console.log(e)
			},
			submit(e){
				
			
				if(!this.id){
					uni.showToast({
						icon: 'none',
						title: '请选择充值套餐',
						duration: 1500
					});
					return
				}
				if(!this.chboxSel){
					uni.showToast({
						icon: 'none',
						title: '请勾选《会员服务协议》',
						duration: 1500
					});
					return
				}
				this.$api({
					url: '/user/recharge',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						level_id:this.id,
						price:this.price,
						yhq_id:this.yhq_id
					},
				}).then(res => {
					if (res.code == 1) {
						let that = this
						uni.requestPayment({
							provider: "wxpay",
							appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.pay_info.paySign, //签名
							nonceStr: res.data.pay_info.nonceStr, // 随机字符串
							package: res.data.pay_info.prepay_id, // 固定值
							signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
							success(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									uni.showToast({
										title: "购买成功",
										icon: "none"
									});
								}
							},
							fail(e) {
								console.log('支付失败支付失败支付失败', e)
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
			getList() {
				this.$api({
					url: '/custom_equity',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.datalist = res.data
						// this.price = this.datalist[0].price
						// this.id = this.datalist[0].id
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.m-div{
		padding: 58rpx 32rpx;
		
		.m-item{
			width: 218rpx;
			height: 240rpx;
			background: #FFFFFF;
			border-radius: 32rpx 12rpx 32rpx 12rpx;
			border: 2rpx solid #EBEAEA;
			text-align: center;
			padding-top: 32rpx;
			position: relative;
			
			&-sel{
				border: 2rpx solid #FCB878;
				background: #FFF9F4;
				color: #713005;
				.m-title{
					color: #713005 !important;
				}
				.m-hx{
					color: #713005 !important;
				}
			}
			
			.m-title{
				font-size: 28rpx;
				color: #2F364B;
			}
			.m-fh{
				font-weight: bold;
				font-size: 24rpx;
				color: #FC3A30;
			}
			.m-num{
				font-weight: bold;
				font-size: 50rpx;
				color: #FC3A30;
			}
			.m-hx{
				font-size: 20rpx;
				color: #2F364B;
				text-decoration-line: line-through;
			}
			.gouxuan{
				width: 39rpx;
				height: 39rpx;
				background-color: #FCB878;
				border-radius: 12rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 2;
			}
		}
	}
	.zhanwei {
		width: 750rpx;
		height: 142rpx;
	}

	.hy-btn-div {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding: 24rpx 32rpx;

		.hy-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #773E00;
			text-align: center;
			line-height: 92rpx;
		}
	}
	.chbox {
		width: 32rpx;
		height: 32rpx;
		background: #F81B1B;
		border-radius: 50%;
		text-align: center;
		// line-height: 24rpx;
	}
	
	.chbox-no {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 1px #999 solid;
	}
	.yhxy{
		color: #F92323;
		
	}
	.num{
		font-weight: bold;
		font-size: 40rpx;
		color: #713005;
		margin-right: 16rpx;
	}
</style>